<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>网页换肤</title>
		<style>
			body,
			ul,
			li {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
			}
			
			body {
				font: 12px/1.5 Tahoma;
			}
			
			li {
				list-style-type: none;
			}
			
			a:link,
			a:visited {
				text-decoration: none;
			}
			
			a:hover {
				text-decoration: underline;
			}
			
			#outer {
				width: 500px;
				margin: 0 auto;
				overflow: hidden;
				zoom: 1;
			}
			
			#skin,
			#nav {
				overflow: hidden;
				zoom: 1;
			}
			
			#skin {
				margin: 10px 0;
			}
			
			#skin li {
				float: left;
				width: 6px;
				height: 6px;
				cursor: pointer;
				overflow: hidden;
				margin-right: 10px;
				text-indent: -9999px;
				border-width: 4px;
				border-style: solid;
			}
			
			#skin li.current {
				background: #fff!important;
			}
			
			#red {
				border-color: red;
				background: red;
			}
			
			#green {
				border-color: green;
				background: green;
			}
			
			#black {
				border-color: black;
				background: black;
			}
			
			#nav {
				border: 1px solid #fff;
			}
			
			#nav li {
				float: left;
				width: 82px;
				line-height: 25px;
				text-align: center;
				border-right: 1px solid #fff;
			}
			
			#nav li.last {
				width: 83px;
				border-right-width: 0;
			}
			
			#nav li a {
				color: #000;
			}
		</style>
		<link href="green.css" rel="stylesheet" type="text/css" />
		<script>
			window.onload = function() {
				var oLink = document.getElementsByTagName("link")[0];
				var oSkin = document.getElementById("skin").getElementsByTagName("li");
				for(var i = 0; i < oSkin.length; i++) {
					oSkin[i].onclick = function() {
						for(var p in oSkin) oSkin[p].className = "";
						this.className = "current";
						oLink['href'] = this.id + ".css";
					}
				}
			};
		</script>
	</head>

	<body>
		<div id="outer">
			<ul id="skin">
				<li id="red" title="红色">红</li>
				<li id="green" class="current" title="绿色">绿</li>
				<li id="black" title="黑色">黑</li>
			</ul>
			<ul id="nav">
				<li>
					<a href="javascript:;">新闻</a>
				</li>
				<li>
					<a href="javascript:;">娱乐</a>
				</li>
				<li>
					<a href="javascript:;">体育</a>
				</li>
				<li>
					<a href="javascript:;">电影</a>
				</li>
				<li>
					<a href="javascript:;">音乐</a>
				</li>
				<li class="last">
					<a href="javascript:;">旅游</a>
				</li>
			</ul>
		</div>
	</body>

</html>